<template>
	
  <view style="width: 100%;height: 80px;position: absolute;margin:15px;">
	  <uni-icons type="back" size="23px" @click="back" style="background-color: aliceblue;border-radius: 50%;"></uni-icons>
  </view>
  <view class="page">
	
    <transition name="fade">
      <view class="form-container" v-if="isVisible">
        <text class="form-title">{{ isLogin ? '登录' : '注册' }}</text>
        <input v-model="username" class="input-field" placeholder="用户名" />
        <input v-model="password" class="input-field" type="password" placeholder="密码" />
        <div v-if="!isLogin">
          <input v-model="confirmPassword" class="input-field" type="password" placeholder="确认密码" />
          <input v-model="phone" class="input-field" placeholder="手机号" />
        </div>
		<button v-if="!isLogin" class="submit-button" @click="addUser(username,confirmPassword,phone)">{{ '注册' }}</button>
        <button v-else class="submit-button" @click="handleSubmit(username)">{{'登录'}}</button>
        
        <text @click="toggleForm" class="toggle-link">
          {{ isLogin ? '没有账号？注册' : '已有账号？登录' }}
        </text>
      </view>
    </transition>
  </view>
  
	<uni-popup ref="message" type="message">
		<uni-popup-message type="error" :message="messageText" :duration="2000"></uni-popup-message>
	</uni-popup>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';

const isLogin = ref(true);
const username = ref('');
const password = ref('');
const confirmPassword = ref('');
const phone = ref('');
const isVisible = ref(true);
let message = ref();
let messageText = ref("");


function handleSubmit(uName:string) {
	getAllUser();
  if (isLogin.value) {
    // 登录验证
    if (!username.value || !password.value) {
      messageText.value = "! 用户名和密码不能为空";
	  message.value.open();
      return;
    }
	const user = allUsers.find(u => u.userName === uName);
	if(user.passWord == password.value){
		uni.switchTab(
			{   
			
			url:`/pages/user/Profile`,
			success: function (e) {
			      console.log('目标页面加载成功,携带参数并触发事件');
			      uni.$emit('templateClick', uName);
			    }
		})
		// let pages = getCurrentPages() 
		     
		//  // 2. 上一页面实例
		// 	// 注意是length长度，所以要想得到上一页面的实例需要 -2
		// 	// 若要返回上上页面的实例就 -3，以此类推
		//  let prevPage = pages[pages.length -2] 
		 
		//  // 3. 给上一页面实例绑定getValue()方法和参数（注意是$vm）
		//  prevPage.$vm.getValue(uName) 
		 
		//  // 4. 返回上一页面
		//  uni.navigateBack({
		// 	 delta: 1 // 返回的页面数
		//  })
		return;
	}
	else{
		messageText.value = "用户名或密码错误！";
		message.value.open();
	}
    console.log('登录:', username.value, password.value);
  } else {
    // 注册验证
    
  }
};



interface user{
	userName:string
	passWord:string
	phone:string
}

let allUsers:Array<user> = reactive([])
const db = uniCloud.database() //代码块为cdb
	

function getAllUser(){
	db.collection('user')
		.get()
		.then((res)=>{
			// res 为数据库查询结果
			console.log("【data】",res)
			
			
			Object.assign(allUsers,res.result.data)
			console.log("接受完ssss",allUsers)
			
		}).catch((err)=>{
			console.log(err.code); // 打印错误码
			console.log(err.message); // 打印错误内容
	  })
}
function addUser(uN:string,uP:string,p:string){
	
	if (!username.value || !password.value || !confirmPassword.value || !phone.value) {
	  
	  messageText.value = "! 所有字段都是必填的";
	  message.value.open();
	  return;
	}
	if (password.value !== confirmPassword.value) {
	  messageText.value = "! 密码不一致";
	  message.value.open();
	  return;
	}
	console.log('注册:', username.value, password.value, phone.value);
	db.collection('user')
	.add(
		{
			userName:uN,
			passWord:uP,
			phone:p
		}
	)
	uni.showToast({
	  title: '注册成功',
	  icon: 'success'
	});
	isLogin.value = !isLogin.value;
}



const toggleForm = () => {
  isVisible.value = false;
  setTimeout(() => {
    isLogin.value = !isLogin.value; 
    isVisible.value = true;
  }, 300);
};

function back() {
	uni.navigateBack({
		delta: 1
	})
}
onMounted(()=>{
	getAllUser();
})
onMounted(() => {
  isVisible.value = true; // 页面加载时使表单可见
});
</script>

<style>
.page {
  height: 80vh; /* 设置为视口高度的100% */
  width: 100%;
  padding-bottom: 20vh;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  background: linear-gradient(#ffc32b, #ff9225); 
}

.form-container {
  width: 90%;
  
  max-width: 300px;
  
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 20px; /* 增加内边距 */
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 189, 123, 0.6)),
                     /* url("https://tse3-mm.cn.bing.net/th/id/OIP-C.xeQ7JC69bMSxhkN1vgJkKQHaFX?w=250&h=185&c=7&r=0&o=5&pid=1.7"); */
                     url("");
  
  /* background-color: #FFF; */
  background-size: cover; /* 背景图像覆盖 */
  /* position: absolute; */
  
  margin-top: 45%;
  
 /* transform: translateY(-50%); */
}

.form-title {
  font-size: 40px;
  font-weight: 1000;
  margin-bottom: 20px;
  text-align: center;
}

.input-field {
  background-color: #FFF;
  
  opacity: 0.65;
  width: 90%;
  
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  transition: border-color 0.5s; /* 输入框边框颜色变化的过渡效果 */
}

.input-field:hover {
  border-color: #000000; /* 聚焦时边框颜色 */
  outline: none; /* 去除默认的轮廓 */
}


.submit-button {
  width: 80%;
  padding: 1px;
  background-color: rgba(255, 255, 255, 0.65);
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.5s, transform 0.5s; /* 背景颜色和缩放的过渡效果 */
}

.submit-button:hover {
  background-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.05); /* 悬停时放大 */
}

.toggle-link {
  display: block;
  margin-top: 10px;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  cursor: pointer;
}

/* 过渡效果 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active 在 Vue 2 中使用 */ {
  opacity: 0;
}
</style>